<template>
    <div class="popTip">
            <i class="iconfont iconjieshi font"></i>
        <div class="body">
            <div class="kuang">
                <slot></slot>
            </div>
            <div class="jiao">
    
            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.popTip{
    display: inline-block;
        position: relative;
}
 .font{
        transition: all 0.3s;
    }
    .body{
        position: absolute;
        transform: scale(0);
        transition: all 0.3s;
        top: 0;
        // bottom: 0;
        left: 0;
        right: 0;
        margin: auto;

    }
    .popTip:hover>.body{
        transform: scale(1);
        transform-origin: right center;
    }
    .kuang{
        text-align: left;
        color: rgba(0, 0, 0, 0.5);
        padding: 5px 15px;
        font-weight: 400;
        width: 300px;
        position: absolute;
        background-color: skyblue;
        bottom: 6px;
        left: 10px;
        border-radius: 10px;
        z-index: 9;
    }
    .jiao{
        width: 0;
        height: 0;
        position: absolute;
        z-index: 1;
        border: 30px solid skyblue; 
        border-top: 10px solid transparent; 
        border-bottom: 10px solid transparent; 
        border-left: 10px solid transparent; 
        transform: rotate(-60deg);
        left: -5px;
        top: -15px;
    }

</style>